<template>
    <n-modal v-model:show="showModal" :mask-closable="false" >
        <n-card style="width: 400px" title="软件说明" :bordered="false" size="huge" role="dialog" aria-modal="true">
            <p>软件访问地址以及更新说明：<a href="https://gitee.com/zhuo-spring/zhuoquan-backend-bp-system/releases" target="_blank" >https://gitee.com/zhuo-spring/zhuoquan-backend-bp-system/releases</a>。</p>
            <p style="color:#f40">注意：本软件用于第五人格民间赛事导播，目前只支持windows版本，window10以下版本需要下载webview2，win10及以上自带。请打开所有窗口开始监听事件再进行后台bp！</p>
            <p>左侧导航是其他窗口，主窗口是后台数据管理。</p>
            <p style="color:#f40">★★★ 第一次使用bp软件的导播请先进入右下角设置 —— 自定义规则 —— 使用默认规则 再进行BP,否则会导致ban位缺失。</p>
            <template #footer>
                <div class="global-flex-center">
                    <div class="button-radios global-flex-center" @click="handleClose">
                        <div class="color_bg" :style="{
                            'width':`calc(100% * (${timer} / 5))`
                        }"></div>
                        <p class="p_text"><span v-show="timer >= 0">{{ Math.floor(timer) }}s后</span>关闭</p>
                    </div>
                </div>
            </template>
        </n-card>
    </n-modal>
</template>

<script setup lang='ts' name="SetupDialog">
const showModal = ref(true);
const timer = ref(5);
const timeInv = setInterval(() => {
    if(timer.value <= 0) return;
    timer.value -= 0.1;
}, 100);
const handleClose = ()=>{
    if(timer.value > 0){
        return;
    }
    showModal.value = false;
    clearInterval(timeInv);
}
</script>
<style scoped lang='scss'>
.button-radios{
    width: 88px;
    height: 28px;
    border-radius: 8px;
    border:1px solid #d9d9d9;
    color:#333;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    .color_bg{
        position: absolute;
        background: #D9D9D9;
        inset: 0;
        height: 100%;
        z-index:0
    }
    .p_text{
        padding: relative;
        z-index: 1;
    }
}

</style>